export abstract class AbstractCanvas {
  constructor(protected ctx: CanvasRenderingContext2D) {}
  public abstract draw(): void

  // 绘制线段
  protected drawline(p1: [number, number], p2: [number, number], lineWidth: number = 2, color: string = 'gray') {
    this.ctx.beginPath()
    this.ctx.moveTo(...p1)
    this.ctx.lineTo(...p2)
    this.ctx.lineWidth = lineWidth
    this.ctx.strokeStyle = color
    this.ctx.stroke()
  }

  // 绘制文本
  protected drawText(
    txt: string,
    po: [number, number],
    color = 'black',
    align: CanvasTextAlign = 'center',
    baseLine: CanvasTextBaseline = 'middle',
  ) {
    this.ctx.beginPath()
    this.ctx.font = 'Italic 10px 微软雅黑'
    this.ctx.fillStyle = color
    this.ctx.textAlign = align
    this.ctx.textBaseline = baseLine
    this.ctx.fillText(txt, ...po)
  }

  // 绘制多段线
  protected drawPolyline(pos: [x: number, y: number][], color = 'black', lineWidth = 2) {
    this.ctx.beginPath()
    this.ctx.moveTo(...pos[0])
    for (let index = 1; index < pos.length; index++) {
      this.ctx.lineTo(...pos[index])
    }
    this.ctx.strokeStyle = color
    this.ctx.lineWidth = lineWidth
    this.ctx.stroke()
  }

  // 绘制圆
  protected drawCircle(po: [number, number], r: number, color = 'black') {
    this.ctx.beginPath()
    this.ctx.arc(...po, r, 0, 2 * Math.PI)
    this.ctx.strokeStyle = color
    this.ctx.stroke()
  }

  // 绘制填充圆
  protected drawFillCircle(po: [number, number], r: number, color = 'black') {
    this.ctx.beginPath()
    this.ctx.arc(...po, r, 0, 2 * Math.PI)
    this.ctx.fillStyle = color
    this.ctx.fill()
  }

  // 绘制图片
  protected drawImage(img: HTMLImageElement, po: [number, number], width: number, height: number) {
    this.ctx.beginPath()
    this.ctx.drawImage(img, ...po, width, height)
    this.ctx.closePath()
  }
}
